<template>
  <view class="isometric-container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <text class="nav-title">医生信息中心</text>
    </view>

    <!-- 主体内容：等距布局的医生信息模块 -->
    <view class="main-content">
      <!-- 左侧：医生卡片列表区 -->
      <view class="module left-module">
        <text class="module-title">医生团队</text>
        <view 
          class="doctor-card" 
          v-for="(doctor, index) in doctorDatas" 
          :key="index"
        >
          <view class="card-header">
            <view class="avatar">
              <text class="avatar-text">{{ doctor.name.charAt(0) }}</text>
            </view>
            <view class="doctor-name">{{ doctor.name }}</view>
          </view>
          <view class="card-body">
            <view class="info-item">
              <text class="info-label">角色：</text>
              <text class="info-value">{{ doctor.role }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">年龄：</text>
              <text class="info-value">{{ doctor.age }}岁</text>
            </view>
          </view>
          <view class="card-footer">
            <view class="contact-btn" @click="handleContact(doctor)">查看详情</view>
          </view>
        </view>
      </view>

      <!-- 中间：医生专长统计区 -->
      <view class="module center-module">
        <text class="module-title">专长分布</text>
        <view class="chart-container">
          <!-- 这里可替换为实际图表组件，如uCharts -->
          <view class="chart-placeholder">
            <text class="chart-loading">专长数据加载中...</text>
          </view>
        </view>
        <view class="specialty-tags">
          <view class="tag-item" v-for="(tag, index) in specialtyTags" :key="index">
            <text class="tag-text">{{ tag }}</text>
          </view>
        </view>
      </view>

      <!-- 右侧：预约操作区 -->
      <view class="module right-module">
        <text class="module-title">快速操作</text>
        <view class="health-tips">
          <text class="tips-title">预约提示</text>
          <text class="tips-content">点击医生卡片的"查看详情"，可预约问诊或查看出诊时间。</text>
        </view>
        <view class="action-buttons">
          <view 
            class="action-btn" 
            v-for="(item, index) in actionButtons" 
            :key="index"
            @click="handleAction(item)"
          >
            <text class="btn-text">{{ item.name }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 医生信息数据
const doctorDatas = ref([
  {name:'吴医生', role:'医生', age:29, specialty:'内科'},
  {name:'梁医生', role:'医生', age:35, specialty:'外科'},
  {name:'晓院士', role:'院士', age:49, specialty:'心血管'}
])

// 专长标签
const specialtyTags = ref(['内科', '外科', '心血管', '儿科', '骨科']);

// 操作按钮
const actionButtons = ref([
  { name: '全部医生', action: 'all' },
  { name: '按科筛选', action: 'filter' },
  { name: '预约记录', action: 'record' },
  { name: '反馈建议', action: 'feedback' }
]);

// 联系医生点击事件
const handleContact = (doctor) => {
  uni.showToast({
    title: `查看${doctor.name}详情`,
    icon: 'none'
  });
};

// 操作按钮点击事件
const handleAction = (item) => {
  let toastMsg = '';
  switch (item.action) {
    case 'all':
      toastMsg = '显示全部医生';
      break;
    case 'filter':
      toastMsg = '进入科室筛选';
      break;
    case 'record':
      toastMsg = '查看预约记录';
      break;
    case 'feedback':
      toastMsg = '提交反馈建议';
      break;
  }
  uni.showToast({
    title: toastMsg,
    icon: 'none'
  });
};
</script>

<style scoped>
/* 全局容器：等距视角背景 */
.isometric-container {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding: 20px;
}

/* 顶部导航栏 */
.nav-bar {
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  border-radius: 12px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  box-shadow: 0 4px 12px rgba(107, 127, 215, 0.2);
}

.nav-title {
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
}

/* 主体内容布局 */
.main-content {
  display: block;
  justify-content: space-between;
  gap: 20px;
}

.module {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 20px;
  flex: 1;
}

.module-title {
  font-size: 16px;
  font-weight: bold;
  color: #6b7fd7;
  margin-bottom: 15px;
  display: block;
}

/* 左侧：医生卡片列表区 */
.doctor-card {
  background: linear-gradient(135deg, #e6eaf5, #f0f2fa);
  border-radius: 8px;
  padding: 18px;
  margin-bottom: 15px;
  transition: all 0.3s ease;
}

.doctor-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(107, 127, 215, 0.15);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 12px;
}

.avatar-text {
  color: white;
  font-size: 20px;
  font-weight: bold;
}

.doctor-name {
  font-size: 18px;
  font-weight: bold;
  color: #333333;
}

.card-body {
  margin-bottom: 12px;
}

.info-item {
  display: flex;
  margin-bottom: 8px;
  font-size: 14px;
}

.info-label {
  color: #6b7fd7;
  width: 60px;
}

.info-value {
  color: #333333;
  flex: 1;
}

.card-footer {
  display: flex;
  justify-content: flex-end;
}

.contact-btn {
  padding: 8px 16px;
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  color: white;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.contact-btn:active {
  transform: scale(0.95);
  opacity: 0.9;
}

/* 中间：医生专长统计区 */
.chart-container {
  margin-bottom: 15px;
}

.chart-placeholder {
  background-color: #f0f2fa;
  border-radius: 6px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-loading {
  color: #888888;
  font-size: 14px;
}

.specialty-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-item {
  background-color: #e6eaf5;
  border-radius: 20px;
  padding: 6px 12px;
}

.tag-text {
  color: #6b7fd7;
  font-size: 12px;
}

/* 右侧：预约操作区 */
.health-tips {
  margin-bottom: 15px;
}

.tips-title {
  font-size: 16px;
  font-weight: bold;
  color: #6b7fd7;
  margin-bottom: 8px;
  display: block;
}

.tips-content {
  font-size: 14px;
  color: #333333;
  line-height: 1.5;
}

.action-buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.action-btn {
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  transition: all 0.3s ease;
}

.action-btn:active {
  transform: scale(0.95);
  opacity: 0.9;
}

.btn-text {
  color: #ffffff;
  font-size: 16px;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }
}
</style>